<template>
  <view class="download pageHeight wh_750 bg_F5F5F5 flex flex-column align-center">
    <view class="background flex">
      <image class="familyName" style="height: 100vh;width: 3700rpx;"
             :src="`${IMG_URL}/index/download_all_background.png`"
      ></image>
      <view class="masking wh_750">
      </view>
    </view>
    <view class="content flex flex-column align-center wh_750">
      <view class="hW_30"></view>
      <view class="header flex align-center">
        <image :src="`${IMG_URL}/index/download_megaphone.png`"
               style="width: 33rpx;height: 33rpx;margin-left: 23rpx;"
        ></image>
        <view class="fs_28 fw_500 color_FF4206 ml_20" v-if="!!page.userInfo">
          {{ `${page.userInfo.nickname}${page.userInfo.mobile}邀请您加入拾亲`
          }}
        </view>
        <view class="fs_28 fw_500 color_FF4206 ml_20" v-else>
          终于等到您 欢迎您加入拾亲
        </view>
      </view>
      <view class="hW_296"></view>
      <view class="flex align-end">
        <image :src="`${IMG_URL}/index/download_icon.png`"
               class="wh_100 hW_103"
        ></image>
        <view class="ml_8 fs_78 fw_500 color_F8F8F8" style="line-height: 84rpx"
        >
          拾亲
        </view>
      </view>
      <view class="fs_24 color_EBEBEB fw_500">
        再小的家庭 也可以有传承
      </view>
      <view class="hW_37"></view>
      <view class="fs_30 fw_500 color_F8F8F8">
        目前已有
        <text class="color_FF4206">{{page.userInfo.totalUser}}</text>
        人加入
      </view>
      <view class="hW_290"></view>
      <view class="wh_541 hW_100 flex align-center justify-center bg_FF4206 fs_39 color_FFFFFF fw_500"
            style="border-radius: 58rpx"
            @click.stop="downloadAPP"
      >
        免费下载APP
      </view>
      <view class="fs_20 fw_400 color_A0A0A0 mt_10"
            @click.stop="goHome"
      >
        免费体验直接使用
      </view>
    </view>


    <view class="mark flex flex-column align-center">
      <view class="color_9F9F9F fs_24 fw_400">全球拾亲计划</view>
      <view class="color_9F9F9F fs_20 fw_400">© 2024 AII Rights Reserved.</view>
      <view class="color_9F9F9F fs_20 fw_400">{{ `ShiQin${android_code}` }}</view>
    </view>

    <view class="floatingWindow wh_750 z_30" style="height: 100vh;" v-if="page.show">
      <image class="wh_750" style="height: 100vh;" :src="`${IMG_URL}/index/download_float.png`"></image>
    </view>
  </view>
</template>

<script setup>
  import { onReady, onLoad } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';
  import { android_code, baseUrl } from '@/sheep/config';

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const page = reactive({
    options: {},
    show: false,
    userInfo: {},
  });

  onLoad(async (options) => {
    page.options = options;
    if (options.spid) {
      const { data } = await sheep.$api.user.getUserInfo({
        id: options.spid,
      });
      console.log(data);
      page.userInfo = data;
    }
  });

  onReady(() => {
    // #ifdef H5
    uni.setNavigationBarTitle({
      title: '免费下载拾亲APP',
    });
    // #endif
  });

  function goHome() {
    uni.reLaunch({
      url: '/pages/message/startupPage',
    });
  }

  function downloadAPP() {
    // #ifdef H5
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      if (sheep.$platform.device.osName.toLocaleLowerCase() == 'ios') {
        window.location.replace(`itms-apps://itunes.apple.com/cn/app/id6670172293`);
      } else {
        page.show = true;
      }
    } else {
      if (sheep.$platform.device.osName.toLocaleLowerCase() == 'ios') {
        window.location.replace(`itms-apps://itunes.apple.com/cn/app/id6670172293`);
      } else {
        window.open(`${baseUrl}/uploads/ShiQin${android_code}.apk`);
      }
    }
    // #endif
  }
</script>


<style scoped lang="scss">
  .background {
    width: 750rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  .familyName {
    position: absolute;
    left: 0;
    animation: background_slide 30s linear infinite;
  }

  @keyframes background_slide {
    from {
      left: 0;
    }
    to {
      left: -2950rpx;
    }
  }

  .masking {
    height: 100vh;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .content {
    height: 100vh;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 5;
  }

  .header {
    width: 690rpx;
    height: 60rpx;
    background: #FEE4A3;
    border-radius: 41rpx 41rpx 41rpx 41rpx;
  }

  .mark {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 37rpx;
  }

  .floatingWindow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
